<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人创业者入驻 - 平台从业者申请</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px 0;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            background: #fff;
            border-radius: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
            color: white;
            padding: 50px 40px 70px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            top: -100px;
            right: -100px;
        }
        
        .header::after {
            content: "";
            position: absolute;
            width: 250px;
            height: 250px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            bottom: -80px;
            left: -60px;
        }
        
        .title {
            font-size: 46px;
            font-weight: 700;
            margin-bottom: 15px;
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        .subtitle {
            font-size: 28px;
            opacity: 0.9;
            font-weight: 300;
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* 认证与规则卡片 */
        .cards-section {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            padding: 0 40px;
            margin-top: -40px;
            position: relative;
            z-index: 10;
            margin-bottom: 40px;
        }
        
        .card {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 20px;
            padding: 35px 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
        
        .card-title {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 25px;
            color: #5b86e5;
            display: flex;
            align-items: center;
        }
        
        .card-title i {
            margin-right: 15px;
            background: #e6f7ff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        
        .card-content {
            font-size: 26px;
            line-height: 1.8;
        }
        
        .card-content li {
            margin-bottom: 15px;
            padding-left: 10px;
            position: relative;
        }
        
        .card-content li:before {
            content: "•";
            color: #5b86e5;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }
        
        .warning {
            color: #ff6b6b;
            font-weight: 500;
        }
        
        /* 表单区域 */
        .form-container {
            padding: 20px 40px 50px;
        }
        
        .form-section {
            margin-bottom: 50px;
            padding: 40px;
            background: #fff;
            border-radius: 25px;
            box-shadow: 0 5px 20px rgba(91, 134, 229, 0.1);
            border: 1px solid #e8f4ff;
        }
        
        .section-title {
            font-size: 36px;
            color: #5b86e5;
            margin-bottom: 35px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f7ff;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 15px;
            background: #e6f7ff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5b86e5;
        }
        
        /* 表单元素样式 */
        .form-group {
            margin-bottom: 40px;
        }
        
        label {
            display: block;
            font-size: 28px;
            margin-bottom: 20px;
            font-weight: 500;
            color: #444;
        }
        
        .required::after {
            content: " *";
            color: #ff6b6b;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 25px 30px;
            font-size: 26px;
            border: 2px solid #e1e9ff;
            border-radius: 15px;
            background: #f8fbff;
            transition: all 0.3s;
        }
        
        input:focus, select:focus, textarea:focus {
            border-color: #5b86e5;
            outline: none;
            box-shadow: 0 0 0 3px rgba(91, 134, 229, 0.2);
        }
        
        textarea {
            min-height: 180px;
            resize: vertical;
        }
        
        /* 文件上传 */
        .file-upload {
            border: 2px dashed #d1e3ff;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            background: #f8fbff;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .file-upload:hover {
            border-color: #5b86e5;
            background: #e6f7ff;
        }
        
        .file-upload i {
            font-size: 56px;
            color: #5b86e5;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        
        .file-upload:hover i {
            transform: translateY(-5px);
        }
        
        .file-text {
            font-size: 28px;
            color: #5b86e5;
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .file-hint {
            font-size: 24px;
            color: #7d9ed8;
        }
        
        .file-preview {
            margin-top: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 15px;
            background: #e6f7ff;
            border-radius: 12px;
        }
        
        .file-preview img {
            max-width: 150px;
            max-height: 150px;
            border-radius: 10px;
            margin-right: 20px;
        }
        
        .file-info {
            font-size: 24px;
        }
        
        /* 押金说明 */
        .deposit-info {
            background: #e6f7ff;
            border-radius: 15px;
            padding: 30px;
            margin-top: 30px;
            border-left: 4px solid #5b86e5;
        }
        
        .deposit-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #5b86e5;
            display: flex;
            align-items: center;
        }
        
        .deposit-title i {
            margin-right: 10px;
        }
        
        .deposit-content {
            font-size: 26px;
            line-height: 1.8;
        }
        
        .deposit-amount {
            font-size: 32px;
            color: #ff6b6b;
            font-weight: 700;
            margin: 0 5px;
        }
        
        /* 提交按钮 */
        .submit-btn {
            display: block;
            width: 100%;
            padding: 30px;
            background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
            color: white;
            font-size: 32px;
            font-weight: 600;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 8px 20px rgba(91, 134, 229, 0.4);
            margin-top: 30px;
            position: relative;
            overflow: hidden;
        }
        
        .submit-btn::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 40px;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(25deg);
            transition: all 0.5s;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(91, 134, 229, 0.6);
        }
        
        .submit-btn:hover::after {
            left: 120%;
        }
        
        .submit-btn:active {
            transform: translateY(0);
        }
        
        /* 底部信息 */
        footer {
            text-align: center;
            padding: 40px;
            color: #7d9ed8;
            font-size: 24px;
            margin-top: 20px;
            background: #f8fbff;
            border-top: 1px solid #e1e9ff;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .footer-links a {
            color: #5b86e5;
            text-decoration: none;
            font-weight: 500;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        /* 响应式调整 */
        @media (max-width: 750px) {
            .container {
                width: 100%;
                border-radius: 0;
            }
            
            .header, .form-container {
                padding-left: 20px;
                padding-right: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">成为平台从业者</h1>
            <p class="subtitle">开启个人创业之旅，共享平台资源与机遇</p>
        </div>
        
        <div class="cards-section">
            <div class="card">
                <h3 class="card-title"><i class="fas fa-id-card"></i> 实名认证规则</h3>
                <ul class="card-content">
                    <li>每个身份证号码仅限认证一个平台账号</li>
                    <li>请确保提交的身份证信息真实有效</li>
                    <li>认证信息将用于平台交易安全保障</li>
                    <li>实名认证通过后方可开始接单</li>
                    <li class="warning">虚假认证将导致账号永久封禁</li>
                </ul>
            </div>
            
            <div class="card">
                <h3 class="card-title"><i class="fas fa-exclamation-triangle"></i> 处罚规则</h3>
                <ul class="card-content">
                    <li><strong>第一次违规：</strong>平台警告通知</li>
                    <li><strong>第二次违规：</strong>账号冻结7天</li>
                    <li><strong>第三次违规：</strong>账号永久封禁</li>
                    <li class="warning">账号封禁后选择删除账号：</li>
                    <li>系统记录该身份证信息</li>
                    <li>一年内禁止使用同一身份证注册</li>
                    <li>一年内禁止在平台接单</li>
                </ul>
            </div>
        </div>
        
        <div class="form-container">
            <div class="form-section">
                <h2 class="section-title"><i class="fas fa-user-tie"></i> 个人信息</h2>
                
                <div class="form-group">
                    <label class="required">真实姓名</label>
                    <input type="text" placeholder="请输入与身份证一致的姓名">
                </div>
                
                <div class="form-group">
                    <label class="required">身份证号码</label>
                    <input type="text" placeholder="请输入18位身份证号码">
                </div>
                
                <div class="form-group">
                    <label class="required">上传身份证</label>
                    <div class="file-upload" id="idCardUpload">
                        <i class="fas fa-id-card"></i>
                        <div class="file-text">点击上传身份证正反面</div>
                        <div class="file-hint">请确保身份证信息清晰可见，支持 JPG/PNG 格式</div>
                        <div class="file-preview" id="idCardPreview">
                            <img src="" alt="身份证预览">
                            <div class="file-info">身份证已上传</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-section">
                <h2 class="section-title"><i class="fas fa-briefcase"></i> 从业信息</h2>
                
                <div class="form-group">
                    <label class="required">选择行业</label>
                    <select>
                        <option value="">请选择您从事的行业</option>
                        <option value="design">创意设计</option>
                        <option value="it">IT技术服务</option>
                        <option value="consulting">咨询顾问</option>
                        <option value="education">教育培训</option>
                        <option value="marketing">市场营销</option>
                        <option value="writing">文案写作</option>
                        <option value="media">新媒体运营</option>
                        <option value="other">其他自由职业</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="required">服务范围</label>
                    <textarea placeholder="请详细描述您提供的服务内容、专业技能及服务范围"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="required">上传资质证明</label>
                    <div class="file-upload" id="certificateUpload">
                        <i class="fas fa-award"></i>
                        <div class="file-text">点击上传相关资质证明</div>
                        <div class="file-hint">如职业证书、作品集、学历证明等（可选）</div>
                        <div class="file-preview" id="certificatePreview">
                            <img src="" alt="资质证明预览">
                            <div class="file-info">资质证明已上传</div>
                        </div>
                    </div>
                </div>
                
                <div class="deposit-info">
                    <div class="deposit-title"><i class="fas fa-shield-alt"></i> 押金规则说明</div>
                    <div class="deposit-content">
                        <p>为确保服务质量，您需要缴纳平台保证金：<span class="deposit-amount">¥2,000</span></p>
                        <p>审核不通过时，押金将在3-5个工作日内原路退回</p>
                        <p>合作期间如无违规行为，保证金在退出平台时全额退还</p>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>
                    <input type="checkbox" style="width: auto; margin-right: 10px; vertical-align: middle;">
                    <span style="vertical-align: middle; font-size: 26px;">我已阅读并同意<a href="#" style="color: #5b86e5;">《平台服务协议》</a>和<a href="#" style="color: #5b86e5;">《隐私政策》</a></span>
                </label>
            </div>
            
            <button class="submit-btn">提交审核申请</button>
        </div>
        
        <footer>
            <p>© 2023 自由职业者平台 | 让个人价值得到更好实现</p>
            <div class="footer-links">
                <a href="#">平台规则</a>
                <a href="#">常见问题</a>
                <a href="#">联系客服</a>
                <a href="#">隐私政策</a>
            </div>
        </footer>
    </div>

    <script>
        // 身份证上传交互
        const idCardUpload = document.getElementById('idCardUpload');
        const idCardPreview = document.getElementById('idCardPreview');
        
        idCardUpload.addEventListener('click', function() {
            // 模拟文件上传成功
            idCardPreview.style.display = 'flex';
            this.style.borderColor = '#5b86e5';
            this.style.background = '#e6f7ff';
        });
        
        // 资质证明上传交互
        const certificateUpload = document.getElementById('certificateUpload');
        const certificatePreview = document.getElementById('certificatePreview');
        
        certificateUpload.addEventListener('click', function() {
            // 模拟文件上传成功
            certificatePreview.style.display = 'flex';
            this.style.borderColor = '#5b86e5';
            this.style.background = '#e6f7ff';
        });
        
        // 表单提交处理
        document.querySelector('.submit-btn').addEventListener('click', function() {
            const nameInput = document.querySelector('input[type="text"]');
            const idInput = document.querySelector('input[type="text"]:nth-of-type(2)');
            const agreeCheckbox = document.querySelector('input[type="checkbox"]');
            
            // 表单验证
            if(!nameInput.value) {
                alert('请输入真实姓名');
                return;
            }
            
            if(!idInput.value || idInput.value.length !== 18) {
                alert('请输入有效的18位身份证号码');
                return;
            }
            
            if(!agreeCheckbox.checked) {
                alert('请阅读并同意平台协议');
                return;
            }
            
            // 表单验证通过
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
            this.disabled = true;
            
            // 模拟提交过程
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-check-circle"></i> 提交成功！';
                this.style.background = 'linear-gradient(135deg, #2ecc71 0%, #27ae60 100%)';
                
                // 显示成功消息
                setTimeout(() => {
                    alert('申请提交成功！\n我们将在1-3个工作日内完成审核，请留意平台通知。');
                    this.innerHTML = originalText;
                    this.disabled = false;
                    this.style.background = 'linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%)';
                }, 1000);
            }, 2000);
        });
    </script>
</body>
</html>